<template>
  <div id="Header">
    <el-row>
      <el-col :span="16">
        <el-steps :active="scene" finish-status="success" simple style="margin: 0;padding: 0">
          <el-step title="第1幕" ></el-step>
          <el-step title="第2幕" ></el-step>
          <el-step title="第3幕" ></el-step>
        </el-steps>
      </el-col>
      <el-col :span="8" class="smalllineheight">
        <div><a class="el-icon-s-custom"> {{ $store.state.currentStudent.name }} </a><a class="el-icon-postcard"> {{ $store.state.currentStudent.studentId }}</a></div>
        <div><a class="el-icon-date"> {{ nowDate }}</a></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Header",
  data(){
    return{
      name :'LeiYuXins Bestie',
      id :2018023946,
      nowDate: '', // 当前日期
    }
  },
  methods: {
    currentTime() {
      setInterval(this.formatDate, 500);
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear() // 年
      let month = date.getMonth() + 1 // 月
      let day = date.getDate() // 日
      let week = date.getDay() // 星期
      let weekArr = [ '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ]
      let hour = date.getHours() // 时
      hour = hour < 10 ? "0" + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? "0" + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? "0" + second : second // 如果只有一位，则前面补零
      this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`
    }
  },
  mounted() {
    this.currentTime()
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate) // 在Vue实例销毁前，清除时间定时器
    }
  },
  computed :{
    scene (){
      return this.$store.state.time
    }
  }
}
</script>

<style scoped>
.smalllineheight{
  line-height: 40px;
  font-size: 10px;
}
</style>
